<template>
	<view class="main">
		<pageLoading mode="if" :show="isShow">
			<!-- 基本信息 -->
			<view>
				<view class="title card">基本信息</view>
				<view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>用户类型</view>
						<view>{{isEnterprise?'企业':'个人'}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>加入时间</view>
						<view>{{userinfo.create_time}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>上级推荐人</view>
						<view>{{userinfo.reference_name || '无'}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>登陆账号</view>
						<view>{{userinfo.account}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>登陆密码</view>
						<view @click="skip('/pages/my/changePassword')">修改密码</view>
					</view>
				</view>
			</view>
			<!-- 企业信息 -->
			<view v-if="isEnterprise">
				<view class="title card">企业信息</view>
				<view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view><text>*</text>公司名称</view>
						<u-input inputAlign="right" border="none" placeholder="请输入公司名称"
							v-model="userinfo.auth_name"></u-input>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view><text>*</text>信用代码</view>
						<u-input inputAlign="right" border="none" placeholder="请输入统一社会信用代码"
							v-model="userinfo.id_number"></u-input>
					</view>
					<view class="card flex flex-ai-fs flex-jc-sb" style="height: 100%;padding: 40rpx;">
						<view class="card-title"><text>*</text>营业执照</view>
						<view class="flex flex-dir-c flex-ai-fe">
							<view @click="chooseImg">
								<i-icon icon="shanghcuan" size="100rpx" v-if="!tempFilePaths"></i-icon>
								<view style="margin-bottom: 10rpx;" v-else>
									<u-image width="100rpx" height="100rpx"
										:src="domain_url"></u-image>
								</view>
							</view>
							<view style="color: #999999;font-size: 18rpx;">请上传公司营业执照</view>
						</view>
					</view>
					<!-- <view class="flex flex-ai-c flex-jc-sb card">
						<view><text>*</text>城市</view>
						<view class="flex f1 flex-jc-fe" style="margin: 0 0 0 10rpx;overflow-x: scroll;white-space: nowrap;">
							<view style="" @click="openAddr">{{userinfo.addr}}</view>
						</view>
					</view> -->
					<view class="flex flex-ai-c flex-jc-sb card">
						<view><text>*</text>办公地址</view>
						<view class="flex flex-jc-fe" style="width: 80%;">
							<!-- <view class="f1" style="margin: 0 0 0 10rpx;overflow-x: scroll;white-space: nowrap;">
								{{userinfo.address_detial_text}}
							</view> -->
							<u-input v-model.trim="userinfo.address_detial_text" inputAlign="right" border="none"
								placeholder="请输入详细地址"></u-input>
							<view class="flex  flex-ai-c" style="margin-left: 10rpx;" @click="skip()">
								<i-icon style="margin-right: 10rpx;margin-top: 10rpx;" icon="dingwei" size="28rpx" />
								<view>定位</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 开户信息 -->
			<view v-if="isEnterprise">
				<view class="title card">开户信息</view>
				<view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>抬头类型</view>
						<view @click="show = true" class="flex flex-ai-c">
							<view>{{userinfo.invoice_heading_type | filterInvoice}}</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>发票抬头</view>
						<u-input inputAlign="right" v-model="userinfo.invoice_title" border="none"
							placeholder="请输入开户公司全称"></u-input>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>默认发票类型</view>
						<view @click="invoiceShow = true" class="flex flex-ai-c">
							<view>{{userinfo.invoice_type?'企业增值税普通发票':''}}</view>
							<u-icon name="arrow-right"></u-icon>
						</view>

					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>统一社会信用代码</view>
						<u-input v-model="userinfo.invoice_credit_code" inputAlign="right" border="none" placeholder="请输入信用代码"></u-input>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>开户银行名称</view>
						<view>
							<u-input v-model="userinfo.invoice_bank" inputAlign="right" border="none" placeholder="请输入开户银行名称"></u-input>
						</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>基本开户账号</view>
						<view>
							<u-input v-model="userinfo.invoice_bank_no" type="number" maxlength="19" inputAlign="right" border="none" placeholder="请输入开户银行账号"></u-input>
						</view>
					</view>
				</view>
			</view>
			<!-- 个人信息 -->
			<view v-if="!isEnterprise">
				<view class="title card">个人信息</view>
				<view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>姓名</view>
						<view>
							<u-input inputAlign="right" v-model="userinfo.name" border="none"
								placeholder="请输入姓名"></u-input>
						</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>身份证号</view>
						<view>
							<u-input v-model="userinfo.id_number" inputAlign="right" border="none"
								placeholder="请输入身份证号"></u-input>
						</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card" @click="sexShow = true">
						<view>性别</view>
						<view>{{userinfo.sex | filterSex}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>电话</view>
						<view>
							<u-input v-model="userinfo.phone" inputAlign="right" border="none"
								placeholder="请输入电话"></u-input>
						</view>
					</view>
					<!-- <view class="flex flex-ai-c flex-jc-sb card">
						<view>城市</view>
						<view class="flex f1 flex-jc-fe" style="margin: 0 0 0 10rpx;overflow-x: scroll;white-space: nowrap;">
							<view style="" @click="openAddr">{{userinfo.addr}}</view>
						</view>
					</view> -->
					
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>详细地址</view>
						<view class="flex flex-jc-fe" style="width: 80%;">
							<!-- <view class="f1" style="margin: 0 0 0 10rpx;overflow-x: scroll;white-space: nowrap;">
								{{userinfo.address_detial_text}}
							</view> -->
							<u-input v-model.trim="userinfo.address_detial_text" inputAlign="right" border="none"
								placeholder="请输入详细地址"></u-input>
							<view class="flex flex-ai-c" style="margin-left: 10rpx;" @click="skip()">
								<i-icon style="margin-right: 10rpx;margin-top: 10rpx;" icon="dingwei" size="28rpx" />
								<view>定位</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-ai-c flex-jc-c card" style="margin-top: 20rpx;" @click="logout">
				<view>退出当前账号</view>
			</view>
			<view style="padding: 60rpx 0 60rpx 0">
				<ButtonConfirm myTxt="保存" @click="updateUserInfo"></ButtonConfirm>
			</view>
			<u-picker @confirm="(v) => confirm(v,'invoice_heading_type','show')" :show="show" closeOnClickOverlay
				:columns="columns" keyName="label" @cancel="show = false"></u-picker>
			<u-picker @confirm="(v) => confirm(v,'sex','sexShow')" :show="sexShow" closeOnClickOverlay
				:columns="sexColumns" keyName="label" @cancel="sexShow = false"></u-picker>
			<u-picker @confirm="(v) => confirm(v,'invoice_type','invoiceShow')" :show="invoiceShow" closeOnClickOverlay
				:columns="invoiceColumns" keyName="label" @cancel="invoiceShow = false"></u-picker>
			<!-- <area-picker :show="addrShow" @cancel="addrShow = false" @addrConfirm="addrConfirm"></area-picker> -->
		</pageLoading>

	</view>
</template>

<script>
	import home from '@/api/home.js';
	import pageLoading from '@/components/pageLoading.vue';
	import ButtonConfirm from '@/components/buttonConfirm.vue'
	import user from '@/api/user.js'
	import common from '@/api/common.js';
	// import areaPicker from '@/components/areaPicker.vue';
	import {mapGetters} from 'vuex';
	export default {
		components: {
			pageLoading,
			ButtonConfirm,
			// areaPicker
		},
		data() {
			return {
				addrShow: false,
				show: false,
				sexShow: false,
				userinfo: {},
				isShow: false,
				type: true,
				invoiceShow: false,
				invoiceColumns: [
					[{
						label: '企业增值税普通发票',
						id: 1
					}]
				],
				columns: [
					[{
						label: '企业',
						id: 1
					}, {
						label: '个人',
						id: 2
					}]
				],
				sexColumns: [
					[{
						label: '男',
						id: 1
					}, {
						label: '女',
						id: 2
					}]
				],
				tempFilePaths: '',
				newInfo: {},
				domain_url: '',
				replacements: {
					"1": "市代理商",
					"2": "区/县代理商",
					"3": "投资人",
					"4": "推荐人",
					"5": "运维",
					"6": "个人",
					"7": "个人",
					"8": "个人",
					"9": "个人",
					"10": "个人",
				}
			}
		},
		filters: {
			filterSex(v) {
				let text = ''
				switch (v) {
					case 1:
						text = '男'
						break
					case 2:
						text = '女'
						break
				}
				return text
			},
			filterInvoice(v) {
				let text = ''
				switch (v) {
					case 1:
						text = '企业'
						break
					case 2:
						text = '个人'
						break
				}
				return text
			}
		},
		onLoad(op) {
			this.getUserInfo()
		},
		computed:{
			...mapGetters(['isEnterprise'])
		},
		methods: {
			openAddr() {
				this.addrShow = true
			},
			addrConfirm(ids,names){
				this.addrShow = false
				this.userinfo.provice = ids.provice
				this.userinfo.city = ids.city
				this.userinfo.district = ids.district
				this.userinfo.addr = `${names.proviceName}${names.cityName ? '/'+names.cityName:''}${names.districtName?'/'+names.districtName:''}`
			},
			isObjectValueEqualNew(obj1, obj2) {
				let that = this
				// 判断两个变量是否为对象类型
				let isObj = (toString.call(obj1) === '[object Object]' && toString.call(obj2) === '[object Object]');
				if (!isObj) {
					return false;
				}
				// 判断两个对象的长度是否相等，不相等则直接返回 fase
				let obj1Keys = Object.keys(obj1);
				let obj2Keys = Object.keys(obj2);
				if (Object.keys(obj1).length !== Object.keys(obj2).length) {
					return false;
				}
				// 判断两个对象的每个属性值是否相等
				for (const key in obj1) {
					// 判断两个对象的键是否相等
					if (obj2.hasOwnProperty.call(obj2, key)) {
						let obj1Type = toString.call(obj1[key]);
						let obj2Type = toString.call(obj2[key]);
						// 如果值是对象，则递归
						if (obj1Type === '[object Object]' || obj2Type === '[object Object]') {
							if (!that.isObjectValueEqualNew(obj1[key], obj2[key])) {
								return false;
							}
						} else if (obj1[key] !== obj2[key]) {
							return false; // 如果不是对象，则判断值是否相等
						}
					} else {
						return false;
					}
				}
				return true; // 上面条件都通过，则返回 true
			},
			confirm({
				value
			}, type, show) {
				this.userinfo[type] = value[0].id
				this[show] = false
			},
			async upload(file) {
				uni.showLoading()
				const res = await common.upload(file)
				uni.hideLoading()
				this.domain_url = res.data.domain_url
				this.tempFilePaths = res.data.url
			},
			chooseImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed', 'original'], //可以指定是原图还是压缩图，默认二者都有'original', 
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						// this.tempFilePaths = res.tempFilePaths[0]
						this.upload(res.tempFilePaths[0])
					}
				})
			},
			logout() {
				uni.removeStorageSync('token')
				uni.removeStorageSync('userinfo')
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			async getUserInfo() {
				const res = await user.getUserInfo()
				// res.data.account_type = res.data.account_type.split(",").map(item=>parseInt(item))
				// let newStr = res.data.account_type.replace(/[123456789]/g, match => this.replacements[match])
				this.userinfo = res.data
				this.newInfo = JSON.parse(JSON.stringify(res.data))
				this.tempFilePaths = res.data.business_image
				this.domain_url = res.data.business_image
				this.isShow = true
			},
			async updateUserInfo() {
				this.userinfo.business_image = this.tempFilePaths
				if (this.isObjectValueEqualNew(this.userinfo, this.newInfo)) {
					uni.showToast({
						title: "暂无更新数据",
						icon: 'none'
					})
					return
				}
				const {
					addr,
					headavatar,
					id,
					income,
					last_login_time,
					member_id,
					money,
					openid,
					parent_bind_time,
					status,
					tel,
					total_income,
					device,
					reference_name,
					provice,
					city,
					district,
					address_detiall,
					...userinfo
				} = this.userinfo
				if(this.isEnterprise) {
					if(!userinfo.address_detial_text || !userinfo.auth_name || !userinfo.business_image || !userinfo.id_number) {
						return uni.showToast({
							title: '请填写完整的企业信息',
							icon: 'none'
						})
					}
				}
				const res = await user.updateUserInfo({
					...userinfo,
					"business_image": this.tempFilePaths
				})
				if (res.code === 200) {
					this.getUserInfo()
					uni.showToast({
						title: "保存成功",
						icon: 'none',
					})
				}else {
					uni.showToast({
						title: "参数错误",
						icon: 'none',
					})
				}
			},
			
			chooseLocation(data) {
				let that = this
				uni.chooseLocation({
					...data,
					success: function(res) {
						uni.hideLoading()
						that.userinfo.lat = res.latitude
						that.userinfo.lng = res.longitude
						// that.userinfo.address_detiall = res.address + res.name
						that.userinfo.address_detial_text = res.address + '/' + res.name
					},
					fail: err => {
						uni.hideLoading()
					}
				});
			},
			getLocation() {
				uni.showLoading()
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: res => {
						that.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
						})
					},
					fail: function(err) {
						that.chooseLocation({
							latitude: 37.870472,
							longitude: 112.548877,
						})
					}
				})
			},
			skip(url = '') {
				if (url) {
					uni.navigateTo({
						url: url
					})
					return
				}
				let that = this
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						that.getLocation()
					},
					fail: () => {
						that.getLocation()
					}
				})


			},
		}
	}
</script>
<style>
	page {
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	.main {
		.title {
			padding: 0 30rpx !important;
			background: #F2F2F2 !important;
			border: 0 !important;
			line-height: 90rpx;
			color: #333333 !important;
		}

		text {
			color: #FC602B;
			margin-right: 5rpx;
		}

		.card {
			padding: 0 40rpx;
			height: 90rpx;
			border-bottom: 1rpx solid #D8D8D8;
			background: #fff;
			font-size: 28rpx;
			color: #666666;
		}
	}
</style>